フォーカスフィールドとテキストフィールド
テキストフィールドが選択されて入力を受け付ける場合、 それは「集中力」があると言われています。 一般に、ユーザーはタップしてテキストフィールドにフォーカスを移動します。 そして開発者はプログラム的に次のようにしてテキストフィールドに焦点を移します。 このレシピで説明されているツールを使用します。
フォーカスの管理は、直感的な操作でフォームを作成するための基本的なツールです。 フロー。たとえば、テキストフィールドのある検索画面があるとします。 ユーザーが検索画面に移動すると、 検索用語のテキスト フィールドにフォーカスを設定できます。 これにより、ユーザーは画面が表示されたらすぐに入力を開始できます。 テキストフィールドを手動でタップしなくても、表示されます。
このレシピでは、焦点を当てる方法を学びます 表示されたらすぐにテキストフィールドに移動します。 テキストフィールドにフォーカスを与える方法も同様に ボタンがタップされたとき。
テキストフィールドが表示されたらすぐにフォーカスします
テキストフィールドが表示されたらすぐにフォーカスを移すには、
使用autofocus財産。
TextField(
autofocus: true,
);
入力の処理とテキストフィールドの作成の詳細については、 を参照してくださいフォーム料理本のセクション。
ボタンがタップされたときにテキストフィールドにフォーカスが当たる
すぐに特定のテキストフィールドにフォーカスを移すのではなく、 後でテキスト フィールドにフォーカスを移す必要がある場合があります。 現実の世界では、特定のことに焦点を当てる必要がある場合もあります。 API 呼び出しまたは検証エラーに応答したテキスト フィールド。 この例では、ユーザーの後のテキストフィールドにフォーカスを与えます。 次の手順でボタンを押します。
- を作成します
FocusNode。 - を渡す
FocusNodeにTextField。 - に焦点を当てます
TextFieldボタンがタップされたとき。
1.FocusNode
まず、FocusNode。
使用FocusNode特定のものを特定するTextField flutterズで
「フォーカスツリー」。これにより、次のことに焦点を当てることができます。TextField次のステップで。
フォーカス ノードは存続期間の長いオブジェクトであるため、ライフサイクルを管理する
を使ってState物体。次の手順に従って作成します。
あるFocusNode内部のインスタンスinitState()の方法Stateクラスで片付けて、dispose()方法：
// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
// Define a corresponding State class.
// This class holds data related to the form.
class _MyCustomFormState extends State<MyCustomForm> {
// Define the focus node. To manage the lifecycle, create the FocusNode in
// the initState method, and clean it up in the dispose method.
late FocusNode myFocusNode;
@override
void initState() {
super.initState();
myFocusNode = FocusNode();
}
@override
void dispose() {
// Clean up the focus node when the Form is disposed.
myFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
// Fill this out in the next step.
}
}
2.FocusNodeにTextField
これで、FocusNode、
特定の人に渡しますTextFieldの中にbuild()方法。
@override
Widget build(BuildContext context) {
return TextField(
focusNode: myFocusNode,
);
}
3. に焦点を当てます。TextFieldボタンがタップされたとき
最後に、ユーザーがフローティング フィールドをタップしたときにテキスト フィールドにフォーカスします。
アクションボタン。使用requestFocus()実行する方法
この仕事。
FloatingActionButton(
// When the button is pressed,
// give focus to the text field using myFocusNode.
onPressed: () => myFocusNode.requestFocus(),
),インタラクティブな例
import 'package:flutter/material.dart';
void main() => runApp(const MyApp());
class MyApp extends StatelessWidget {
const MyApp({super.key});
@override
Widget build(BuildContext context) {
return const MaterialApp(
title: 'Text Field Focus',
home: MyCustomForm(),
);
}
}
// Define a custom Form widget.
class MyCustomForm extends StatefulWidget {
const MyCustomForm({super.key});
@override
State<MyCustomForm> createState() => _MyCustomFormState();
}
// Define a corresponding State class.
// This class holds data related to the form.
class _MyCustomFormState extends State<MyCustomForm> {
// Define the focus node. To manage the lifecycle, create the FocusNode in
// the initState method, and clean it up in the dispose method.
late FocusNode myFocusNode;
@override
void initState() {
super.initState();
myFocusNode = FocusNode();
}
@override
void dispose() {
// Clean up the focus node when the Form is disposed.
myFocusNode.dispose();
super.dispose();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: const Text('Text Field Focus'),
),
body: Padding(
padding: const EdgeInsets.all(16),
child: Column(
children: [
// The first text field is focused on as soon as the app starts.
const TextField(
autofocus: true,
),
// The second text field is focused on when a user taps the
// FloatingActionButton.
TextField(
focusNode: myFocusNode,
),
],
),
),
floatingActionButton: FloatingActionButton(
// When the button is pressed,
// give focus to the text field using myFocusNode.
onPressed: () => myFocusNode.requestFocus(),
tooltip: 'Focus Second Text Field',
child: const Icon(Icons.edit),
), // This trailing comma makes auto-formatting nicer for build methods.
);
}
}